<template>
  <div class="bigtime">
    <!-- 推广按钮组件 -->
    <extension
      v-if="query.money && details"
      :share="fenxiang"
      :promotionMoney="query.s_money"
      :except="true"
      :query="query"
      :state="positionStyle"
      :type_type="2"
      :is_id='details.discount_id'
      :curriculum_id="query.curriculum_id"
    ></extension>
    <!-- 基本信息组件 -->
    <partcurriculum
      v-if="query !== ''"
      :curriculum="details"
      :click_number="details.click_number"
      :line="false"
      v-on:gotuiguang="gotuiguang"
      :query="query"
      :positionStyle="positionStyle"
      ref="mabu"
    ></partcurriculum>
    <section class="line"></section>
    <teacher
      v-on:okTeacher="okTeacher"
      :teacherData="teacherData"
      v-if="teacherData !== ''"
    ></teacher>
    <section class="line"></section>
    <div class="info_tab_box">
      <div :class=" positionStyle === true ? 'pos sp_tab_select1' : 'sp_tab_select1'">
        <tab custom-bar-width="30px">
          <tab-item
            selected
            @on-item-click="tabIndex(1)"
          >课程介绍</tab-item>
          <tab-item @on-item-click="tabIndex(2)">课程列表</tab-item>
          <tab-item @on-item-click="tabIndex(3)">用户评价{{evaluate.count && evaluate.count !== 0 ? evaluate.count: '' }}</tab-item>
        </tab>
      </div>
    </div>
    <div style="width:100%;height:44px;"></div>
    <div
      class="content"
      v-if="index === 1"
    >
      <div v-html="details.introduction"></div>
      <div
        @click="opentanchuang"
        style="margin: 10px 0px; text-align: center; width: 100%; font-size: 14px; color:#59A6FF;"
      >购买须知</div>
      <Recommend
        :type='Recommend_list'
        @curriculumId='curriculum_id'
      ></Recommend>
    </div>
    <div
      class="content1"
      v-if="index === 2"
    >
      <courselist
        v-for="(item,index) in chapterArr"
        :key="index"
        :item="item"
        v-on:listcallback="listcallback"
      ></courselist>
    </div>
    <div v-if="index === 3">
      <div v-if="evaluate.count > 0">
        <div class="count-fen">
          <div class="count-left">
            <div class="color-size">{{evaluate.fen.score}}分</div>
            <div class="star"><img :src="evaluate.fen.scoreImg"></div>
            <div>{{evaluate.fen.txt}}</div>
          </div>
          <div class="count-right">
            <div>
              <span>讲师专业</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree1 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>方法有效</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree2 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>逻辑清晰</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree3 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>声音画质</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree4 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>课程服务</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree5 / 5) * 100 +'%;'"></span>
              </span>
            </div>
          </div>
        </div>
        <evaluationlist
          v-for="(item,index) in evaluate.data"
          :key="index"
          :item="item"
        ></evaluationlist>
      </div>
      <div
        v-else
        class="none-one"
      >
        <no-assessment></no-assessment>
      </div>
    </div>
    <div
      class="marsk-s"
      v-if="show"
      @click.stop="hide"
    >
      <div class="totast">
        <p class="marsk-title">付费详情</p>
        <div class="o-div">
          <p>课程价格</p>
          <p class="coo">￥{{query.y_money/100}}</p>
        </div>
        <div class="o-div">
          <p>限时特惠</p>
          <p class="boo">-¥{{(query.y_money/100 - query.money/100).toFixed(2)}}</p>
        </div>
        <div
          class="twobtn"
          @click.stop="hour"
        >立即抢购</div>
      </div>
    </div>
    <div class="btn-btn">
      <div
        v-if="is_sin === 0"
        @click="sbtn"
      >立即抢购</div>
      <div
        v-else
        @click="into"
      >进入课程</div>
    </div>
    <!-- 赠送课程弹窗组件 -->
    <presentation-course
      ref="gis"
      v-if="query !==''"
      :curriculum="query"
      v-on:giveCourse="giveCourse"
    ></presentation-course>
    <!-- 底部弹出组件 -->
    <popup
      v-if="is_collection !== '' && teacherData !== ''"
      :curriculum_id="curriculum_id"
      :is_collection="is_collection"
      v-on:collectionCourse="collectionCourse"
      v-on:openPresentationCourse="openPresentationCourse"
      :lecturer_id="teacherData.lecturer.lecturer_id"
      ref="popup"
    ></popup>
    <PurchaseInstructions ref="Instructions">
      <div slot="title">
        限时特惠须知
      </div>
      <div
        slot="content"
        class="ppp-sss"
      >
        <p>
          1、该课程为付费系列课程，按课程计划定期更新，每节课可在教师开课后学习，
          也可免费回听。
        </p>
        <p>2、购买课程后，可登录微信服务号“知运”，点击“我的课程”——“已购课
          程”进入听课。</p>
        <p>3、该课程为虚拟内容服务，购买成功后概不退款，敬请谅解。
          退还。</p>
        <p>4、如果在使用过程中产生问题，可以点击“个人中心”——“在线客服”进行
          咨询。</p>

      </div>
    </PurchaseInstructions>
  </div>
</template>

<script>
import Recommend from '@/components/curriculum/Recommend.vue'
import PurchaseInstructions from '@/components/public/PurchaseInstructions'
import noAssessment from '@/components/public/noassessment'
import suctionTops from '@/utils/suctiontop'
import starRating from '@/utils/starrating'
import wxPay from '@/utils/wxpay'
import wxReady from '@/utils/wxReady'
import popup from '@/components/public/popup'
import partcurriculum from '@/components/partcurriculum/partcurriculum'
import courselist from '@/components/public/courselist'
import teacher from '@/components/public/teacher'
import presentationCourse from '@/components/public/presentationcourse'
import evaluationlist from '@/components/public/evaluationlist'
import { books_list, comments_show } from '@/api/coursedetails'
import { bookschapter, timeOutMoney, collectionOnclick, give, timelimitdetails } from '@/api/assemble'
import {search_popularity} from '@/api/coursedetails'
import { mapState } from 'vuex'
import extension from '@/components/public/extension'
import {
  Tab,
  TabItem
} from 'vux'
export default {
  data () {
    return {
      Recommend_list: [],
      teacherData: '',
      curriculum_id: '',
      fenxiang: '',
      is_collection: '',
      details: '',
      index: 1,
      show: false,
      positionStyle: false,
      chapterArr: [],
      query: '',
      evaluate: {},
      is_sin: '' // 判断是否购买过此课程
    }
  },
  computed: {
    ...mapState({
      user_id: state => state.member_id
    })
  },
  created () {
    if (this.$route.query.cid) {
      //       console.log(1233123123)
      //       console.log(JSON.parse(this.$route.query.cid))
      //       console.log(1233123123)
      this.fenxiang = JSON.parse(this.$route.query.cid)
      this.curriculum_id = this.fenxiang.curriculum_id
    } else {
      this.curriculum_id = this.$route.query.curriculum_id
    }
    // console.log(this.$route.query.discount_id)
    this.getdetails()
    this.commentsShow()
    this.getchapterList()
    this.getRecommend()
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.suctiontop)
  },
  watch: {
    details () {
      this.$nextTick(() => {
        document.title = this.details.title
      })
    }
  },
  methods: {
    getRecommend () {
      search_popularity().then(res => {
        let { code, data } = res.data
        if (code == 200) {
          // console.log('猜你喜欢',data)
          this.Recommend_list = data
        }
      })
    },
    opentanchuang () {
      this.$refs.Instructions.ava = true
    },
    // 老师
    okTeacher (state, nu) {
      if (state) {
        if (nu === 1) {
          this.teacherData.follow_count = this.teacherData.follow_count + 1
        } else {
          this.teacherData.follow_count = this.teacherData.follow_count - 1
        }
      }
    },
    // 点击弹窗上的赠送
    giveCourse (num) {
      let obj = {
        number: num,
        user_id: this.user_id,
        curriculum_id: this.$route.query.curriculum_id,
        url_id: this.fenxiang && this.fenxiang.shareid !== undefined ? this.fenxiang.shareid : 0
      }
      give(obj).then(res => {
        if (res.data.code === 200) {
          wxPay(res).then(data => {
            if (window.__wxjs_is_wkwebview !== true) {
              this.$router.push({
                path: '/give',
                query: {
                  num: num,
                  title: this.$route.query.title,
                  curriculum_id: this.$route.query.curriculum_id
                }
              })
            } else {
              window.location.href = `/give?num=${num}&curriculum_id=${this.$route.query.curriculum_id}&title=${this.$route.query.title}`
            }
          })
        }
      })
    },
    getmoney () {
      if (this.fenxiang) {
        console.log(this.fenxiang)
      }
      let obj = {
        discount_id: this.$route.query.discount_id ? this.$route.query.discount_id : this.fenxiang.discount_id
      }
      timelimitdetails(obj).then(res => {
        if (res.data.code === 200) {
          res.data.data.preferential_money = res.data.data.preferential_money / 100
          res.data.data.chapter_count = this.chapterArr.length
          this.query = res.data.data
        } else {
          let _this = this
          this.$vux.alert.show({
            title: '提示',
            content: '此课程已经不在了，更换其它试一试',
            onHide () {
              _this.$router.push({
                path: '/home'
              })
            }
          })
        }
      })
    },
    into () {
      if (this.chapterlist) {
        if (this.details.category == 1) { // 语音课程
          this.$router.push({
            path: '/co_audio',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        } else if (this.details.category == 2) {
          this.$router.push({
            path: '/co_text',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        } else if (this.details.category == 3) {
          this.$router.push({
            path: '/co_video',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        }
      } else {
        alert('课程没有章节')
      }
    },
    gotuiguang () {
      this.$router.push({
        path: '/co_canvasimg',
        query: {
          member_id: this.user_id,
          curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id
        }
      })
    },
    // 课程评价
    commentsShow () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id
      }
      comments_show(obj).then(res => {
        if (res.data.code === 200) {
          res.data.data.data.forEach((element, i) => {
            element = Object.assign(element, starRating(element.score))
          })
          res.data.data.fen = Object.assign(res.data.data.fen, starRating(res.data.data.fen.score))
          this.evaluate = res.data.data
        }
      })
    },
    getdetails () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
        user_id: this.user_id,
        type: 0
      }
      books_list(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          this.details = res.data.data.data
          this.is_sin = res.data.data.is_sin
          this.is_type = res.data.data.is_type
          this.is_gz = res.data.data.is_gz
          this.teacherData = res.data.data.lecturer_list
          this.$nextTick(() => {
            this.wxShare()
          })
          if (this.is_gz === 0) {
            this.is_collection = 'no'
          } else {
            this.is_collection = 'yes'
          }
        }
      })
    },
    // 设置吸顶
    suctiontop () {
      this.positionStyle = suctionTops('.info_tab_box')
    },
    // 切换tab
    tabIndex (index) {
      if (index !== this.index) {
        this.index = index
      }
    },
    // 获取章节模块
    getchapterList () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id
      }
      bookschapter(obj).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.chapterArr = data
          this.chapterlist = true
          this.getmoney()
        } else {
          this.chapterlist = false
        }
      })
    },
    // 点击试学
    listcallback (item, index) {
      if (this.details.category == 1) { // 语音课程
        this.$router.push({
          path: '/co_audio',
          query: {
            curriculum_id: this.details.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      } else if (this.details.category == 2) {
        this.$router.push({
          path: '/co_text',
          query: {
            curriculum_id: this.details.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      } else if (this.details.category == 3) {
        this.$router.push({
          path: '/co_video',
          query: {
            curriculum_id: this.details.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      }
    },
    sbtn () {
      this.show = true
    },
    hide () {
      this.show = false
    },
    hour () {
      this.show = false
      let obj = {
        user_id: this.user_id,
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
        discount_id: this.$route.query.discount_id ? this.$route.query.discount_id : this.fenxiang.discount_id,
        url_id: this.fenxiang && this.fenxiang.shareid !== undefined ? this.fenxiang.shareid : 0
      }
      timeOutMoney(obj).then(res => {
        if (res.data.code === 200) {
          wxPay(res).then(data => {
            this.getdetails()
            this.commentsShow()
            this.getchapterList()
          })
        } else {
          alert(res.data.msg)
        }
      })
    },
    // 收藏
    collectionCourse (state) {
      if (state) {
        this.getdetails()
      } else {
        let obj = {
          curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
          user_id: this.user_id
        }
        collectionOnclick(obj).then(res => {
          if (res.data.code === 200) {
            this.getdetails()
          } else {
            alert('收藏失败')
            this.mars = false
          }
        })
      }
    },
    // 赠送课程弹窗
    openPresentationCourse () {
      this.$refs.gis.state = true
    },
    // 微信分享
    wxShare () {
      // let title = this.details.title
      // let desc = this.details.share_describe
      // wxReady(title, desc, 'timelimiteddiscount', this.details.cover, `&discount_id=${this.$route.query.discount_id ? this.$route.query.discount_id : this.fenxiang.discount_id}&curriculum_id=${this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id}`
      // ).then(() => {
      //   this.marsk = false
      // })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
      window.addEventListener('scroll', this.suctiontop)
    })
  },
  components: {
    Recommend,
    PurchaseInstructions,
    teacher,
    evaluationlist,
    partcurriculum,
    Tab,
    TabItem,
    courselist,
    extension,
    popup,
    presentationCourse,
    noAssessment
  }
}
</script>

<style lang="less" scoped>
.ppp-sss > p {
  width: 100%;
  line-height: 30px;
}
.bigtime {
  padding-bottom: 60px;
}
.none-one {
  width: 100%;
  padding: 20px 5%;
}
.count-fen {
  width: 100%;
  height: 100px;
  padding: 0 5%;
  display: flex;
  box-sizing: border-box;
  margin: 10px 0px;
  .count-left {
    flex: 2;
    border-right: 1px solid #eeeeee;
    text-align: center;
    .color-size {
      font-size: 24px;
      color: #ff9300;
      margin-top: 6px;
    }
    .star {
      width: 100%;
      height: 15px;
      margin: 10px 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    div:last-of-type {
      font-size: 14px;
      color: #1a1a1a;
    }
  }
  .count-right {
    flex: 3;
    div {
      font-size: 12px;
      color: #999999;
      margin: 3px 0;
      display: flex;
      align-items: center;
      span:first-of-type {
        text-indent: 19px;
        margin-right: 20px;
      }
      .bar {
        position: relative;
        display: inline-block;
        width: 55%;
        height: 5px;
        background: #eeeeee;
        border-radius: 50px;
        overflow: hidden;
        span {
          display: inline-block;
          position: absolute;
          height: 100%;
          background: #ff9300;
          border-radius: 50px;
        }
      }
    }
  }
}
.evaluate {
  width: 100%;
  box-sizing: border-box;
  padding: 0 5%;
  margin: 10px 0px;
}
.btn-btn {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 10px 15px;
  position: fixed;
  bottom: 0;
  div {
    width: 100%;
    height: 100%;
    background-color: #da4131;
    border-radius: 38px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
  }
}
.info_tab_box {
  position: relative;
}
.info_tab_box /deep/ .vux-tab-selected {
  color: #ff0000 !important;
}
.info_tab_box /deep/ .vux-tab-bar-inner {
  background-color: #ff0000 !important;
}
.sp_tab_select1 {
  width: 100%;
  z-index: 100;
  position: absolute;
  top: 0;
}
.pos {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 5% 0px 5%;
}
.content1 {
  width: 100%;
}
.marsk-s {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  .totast {
    width: 100%;
    padding: 0 15px;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 6px 6px 0px 0px;
    background-color: #fff;
    .marsk-title {
      width: 100%;
      height: 55px;
      text-align: center;
      line-height: 55px;
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #333333;
    }
    .o-div {
      width: 100%;
      height: 55px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      p {
        display: flex;
      }
      p:first-of-type {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #333333;
        flex: 1;
      }
      .coo {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #333333;
      }
      .boo {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #da4131;
      }
    }
    .twobtn {
      width: calc(100% - 30px);
      height: 40px;
      background-color: #da4131;
      border-radius: 38px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      position: absolute;
      bottom: 10px;
    }
  }
}
.line {
  // width: 100%;
  // height: 10px;
  // background-color: #f5f5f5;
}
</style>
